<html>
<head>
	<title>Sword - Magic - KungFu</title>
	<script type="text/javascript" src='../libs/yahoo.js'></script>
	<script type="text/javascript" src='../libs/animation.js'></script>
	<script type="text/javascript" src='../libs/connection.js'></script>
	<script type="text/javascript" src='../libs/dom.js'></script>
	<script type="text/javascript" src='../libs/event.js'></script>
	<style>
		body{
			background-color: #476C6C; 
			font-family: Impact, Charcoal, sans-serif;
			}
	#intro, #arena, #chooseplayer, #credits,#attack, #splash {display: none;}
	.left, .vs, .right{
		float: left;
	}
	#continue{
    position: absolute;
    top:0px;
    left: 0px;
    display: none;
  }
	#attack{
		xbackground-color: black;
		xheight: 100%;
		xwidth: 100%;
		position: absolute;
		top: 165px;
		left: 0px;
		xpadding-top: 168px
	}
	#attack div{
		padding: 10px;
		size: 1em;
		
	}
	#attack div a {
		color: white;
		size: 1.1em;
	}
	.vs{
		color: white;
		font-style: italic;
		font-weight: bold;
		padding: 0px 10px 0px 10px;
		font-size: 1.5em;
	}
	.status{
		color: white;
		font-size: .78em;
		padding: 0px;
		margin: 0px;
		line-height: .95em;
	}
	#splash h2 , #splash h3{
		color: #FFFFFF;
		margin: 0px;
		padding: 0px;
		font-size: 1.5em;
		position: absolute;
		top: 10px;
		left: 10px;
	}
	#splash h3 {
		color: #000000;
		top:12px;
		left: 12px;
	}
	#menu {
		margin-left: auto;
		margin-right: auto;
		width: 230px;
		text-align: center;
		color: white;
		position: absolute;
		top: 50px;
		font-size: 1.4em;
	}
	#menu a {
		color: black;
		text-decoration: none;
	}
	#menu a:hover {
		color: white;
	}
	#playerleft, #playerright, #ppimg{
		height:128px;
		width:128px;
	}
	.playerstatus div div {
		width: 168px;
		font-size: 1.4em;
		
	}
	.playerstatus{
		width: 100%;
		color: white;
		font-family: Verdana;
		margin-top: 20px;
		
		
	}
	.statleft, .statright{
		float: left;
		background-color: black;
		padding-bottom: 4px;
		padding-left: 10px;
	}
	.compact{
		margin:0px;
		padding: 0px;
		line-height: 1em;
	}
	#playerimgcont{
		margin-left: 10px;
		margin-top: 10px;
	}
	#attack{
		font-family: Arial, Helvetica, sans-serif;
	}
	</style>
	<script>
		YAHOO.namespace('alw.smkf');
		YAHOO.namespace('alw.localplayer');
		YAHOO.namespace('alw.remoteplayer');
		ydom = YAHOO.util.Dom;
		yevt = YAHOO.util.Event;
		var yhost = window.external;
		
		/** messenger lib code **/
		if(yhost){
		  yhost.SetEventHandler("PluginMessage", onPluginMessage);
		}
		function onPluginMessage(msg){
			YAHOO.alw.remoteplayer.currAttack = msg;
			YAHOO.alw.remoteplayer.hasSetAttack = true;
			YAHOO.alw.smkf.checkReady();
		}
		
		/** messenger lib code **/
		
		var playerObj = function(){}
		playerObj.prototype={
			score: 0,
			points: {sword: 0, magic: 0, kungfu: 0},
			health: 100,
			cards: 0,
			currAttack: 'sword',
			hasSetAttack: false
		}
		YAHOO.alw.localplayer= new playerObj();
		YAHOO.alw.remoteplayer=new playerObj();
		
		YAHOO.alw.smkf = {
			chars: ["antaeus","asmodeus","balrug","blue_death","cacodemon","cerebov","cyclops","dispater","dragon","ereshkigal","ettin","executioner","fiend","fire_giant","frost_giant","geryon","gloorx_vloq","golden_dragon","green_death","griffin"],
			chosenCharIdx: 0,
			init: function(){
				//console.log('init!');
				YAHOO.alw.smkf.setupImages();
				if(yhost){
				  yhost.LocalReady ();
				}
				YAHOO.alw.smkf.swapPanel('splash');
			},
			setupImages: function(){
			 var imgDump = new Array();
        for(i=0;i<this.chars.length;i++){
          imgDump[i] = document.createElement('img')
          imgDump[i].src = "http://www.andrewwooldridge.com/widgets/SwordMagicKungFuProject/src/img/"+this.chars[i]+"_left.gif"
          ydom.get('imgdump').appendChild(imgDump[i]);
        }
      },
			swapPanel: function(selPanel){
				var panels = ydom.getElementsByClassName('panel')
				ydom.setStyle(panels, 'display', 'none');
				ydom.setStyle(selPanel, 'display','block');
				return false;
			},
			chooseChar: function(dir){
				var charsLen = this.chars.length;
				var charIdx = this.chosenCharIdx;
				var targetImg = ydom.get('ppimg');
				switch(dir){
					case "fwd": 
						charIdx++;
						if(charIdx >= charsLen){
							charIdx = 0;
						}
						break;
					case "back": 
						charIdx--;
						if(charIdx <0){
							charIdx = charsLen-1;
						}
						break;
				}
				this.chosenCharIdx = charIdx;
				var imgString = "http://www.andrewwooldridge.com/widgets/SwordMagicKungFuProject/src/img/"+this.chars[this.chosenCharIdx]+"_left.gif"
        targetImg.setAttribute('src',imgString);
        //targetImg.setAttribute('src',"http://www.andrewwooldridge.com/widgets/SwordMagicKungFuProject/src/img/cacodemon_left.gif");
				ydom.get('playerleft').setAttribute('src',"../img/"+this.chars[this.chosenCharIdx]+"_left.gif");
				
			},
			startGame: function(){
				YAHOO.alw.smkf.swapPanel('arena');
				window.setTimeout("YAHOO.alw.smkf.showAttack()",1000);
			},
			showAttack: function(){
				ydom.setStyle(ydom.getElementsByClassName('playerstatus'),'color','black');
				ydom.setStyle('attack','display','block')
			},
			doAttack: function(atkType){
				ydom.setStyle(ydom.getElementsByClassName('playerstatus'),'color','white');
				ydom.setStyle('attack','display','none')	
				YAHOO.alw.localplayer.currAttack = atkType;
				YAHOO.alw.localplayer.hasSetAttack = true;
				yhost.SendPluginMessage(atkType);
				//this.resolveDamage();
				this.checkReady();
			},
			checkReady: function(){
				if(YAHOO.alw.localplayer.hasSetAttack && YAHOO.alw.remoteplayer.hasSetAttack){
					this.resolveDamage();
				}
			},
			resolveDamage: function(){
				var playerDamage = 0;
				var opponentDamage = 0;
				switch(YAHOO.alw.localplayer.currAttack){
					case 'sword':
						switch(YAHOO.alw.remoteplayer.currAttack){
							case 'sword':
								//tie - jarring so 1pt damage
								playerDamage = 1;
								opponentDamage = 1;
								break;
							case 'magic':
								//sword beats magic
								playerDamage = 0;
								opponentDamage = 5;
								break;
							case 'kungfu':
								//sword loses to kungfu
								playerDamage = 5;
								opponentDamage = 0;
								break;
						}
						break;
					case 'magic':
						switch(YAHOO.alw.remoteplayer.currAttack){
							case 'sword':
								//magic loses to sword
								playerDamage = 5;
								opponentDamage = 0;
								break;
							case 'magic':
								//tie
								playerDamage = 1;
								opponentDamage = 1;
								break;
							case 'kungfu':
								//magic beats kungfu
								playerDamage = 5;
								opponentDamage = 0;
								break;
						}
						break;
					case 'kungfu':
						switch(YAHOO.alw.remoteplayer.currAttack){
							case 'sword':
								//kungfu beats sword
								playerDamage = 0;
								opponentDamage = 5;
								break;
							case 'magic':
								//kungfu loses to magic
								playerDamage = 5;
								opponentDamage = 0;
								break;
							case 'kungfu':
								//tie
								playerDamage = 1;
								opponentDamage = 1;
								break;
						}
						break;
				}
				//console.log('player:' + YAHOO.alw.localplayer.currAttack + " opponent:" + YAHOO.alw.remoteplayer.currAttack)
				//console.log('playerdamage ' + playerDamage)
				//console.log('remotedamage ' + opponentDamage)
				YAHOO.alw.localplayer.health-=playerDamage;
				YAHOO.alw.remoteplayer.health-=opponentDamage;
				
				this.updateStatus();
				YAHOO.alw.localplayer.hasSetAttack = false;
				YAHOO.alw.remoteplayer.hasSetAttack = false;
				this.showContinue();
			},
			updateStatus: function(){
				ydom.get('llife').innerHTML = YAHOO.alw.localplayer.health;
				ydom.get('rlife').innerHTML=YAHOO.alw.remoteplayer.health;
			},
			showContinue: function(){
        ydom.setStyle(ydom.getElementsByClassName('playerstatus'),'color','white');
				ydom.setStyle('attack','display','none')
				ydom.setStyle('continue','display','block')
      },
      doContinue: function(){
      	//ydom.setStyle(ydom.getElementsByClassName('playerstatus'),'color','white');
				ydom.setStyle('continue','display','none')
        window.setTimeout("YAHOO.alw.smkf.showAttack()",2000);
      }
		
		}


		
		YAHOO.util.Event.addListener(window,'load',YAHOO.alw.smkf.init);
		
	
	</script>
</head>
<body>
	<div id='loading' class='panel'>
		LOADING...
	</div>
	<div id='splash' class='panel'>
		<h3>Sword Magic KungFu</h3>
		<h2>Sword Magic KungFu</h2>
		<div id='menu'>
			<div><a href="javascript:void(0)" onclick="YAHOO.alw.smkf.swapPanel('chooseplayer')">Start</a></div>
			<div><a href="javascript:void(0)" onclick="YAHOO.alw.smkf.swapPanel('intro')">How To Play</a></div>
			<div><a href="javascript:void(0)" onclick="YAHOO.alw.smkf.swapPanel('credits')">Credits</a></div>
		</div>
	</div>
	<div id='intro' class='panel'>
		<h1>Sword-Magic-KungFu!</h1>
		<p>Sword-Magic-KungFu is a battle game played in the style of Rock-Paper-Scissors. 
		Sword beats Magic, Magic beats KungFu, and KungFu beats Sword. Beyond this, you build up a 
		Charge Meter each time you play a certain style. If you max your charge meter for that
		style, you can unlease an Extreme Attack which does massive damage. However, if all you do is one
		style, your opponent will cream you before you can ever Extreme Attack.</p>
		<p>Choose a character and battle your friends!</p>
	</div>
	<div id='arena' class='panel'>
		<div id='playerimgcont'>
			<div class="left">
				<img id='playerleft' src="../img/antaeus_left.gif"/>
			</div>
			<div class="vs">VS</div>
			<div class="right">
				<img id="playerright" src="../img/cerebov.gif"/>
			</div>
		</div>
		<br clear="all"/>
		<div class='playerstatus'>
			<div class='statleft'>
				<div>LIFE: <em id='llife'>100</em></div>
				<div>SCORE: <em id='lscore'>0</em></div>
				<div class='compact' id='lsword'>Sword: <em>0</em></div>
				<div class='compact' id='lmagic'>Magic: <em>0</em></div>
				<div class='compact' id='lkungfu'>KungFu: <em>0</em></div>
			</div>
			<div class='statright'>
				<div>LIFE: <em id='rlife'>100</em></div>
				<div>SCORE: <em id='rscore'>0</em></div>
				<div class='compact'>Sword: <em id='rsword'>0</em></div>
				<div class='compact'>Magic: <em id='rmagic'>0</em></div>
				<div class='compact'>KungFu: <em id='rkungfu'>0</em></div>		
			</div>
		</div>
	</div>
	<div id='chooseplayer' class='panel'>
		<h1>Choose a character!</h1>
		<div id='playerpicker'>
			<img id='ppimg' src="../img/antaeus_left.gif" class='playerpickimg'/>
		</div>
		<a href="javascript:void(0)" onclick="YAHOO.alw.smkf.chooseChar('back')">Prev</a>
		<a href="javascript:void(0)" onclick="YAHOO.alw.smkf.chooseChar('fwd')">Next</a>
		<div><a href="javascript:void(0)" onclick="YAHOO.alw.smkf.startGame()">PLAY!</a></div>
	</div>
	<div id='credits' class='panel'>
		Credits.
	</div>
	<div id='attack'>
		<div><a href="javascript:void(0)" onclick="YAHOO.alw.smkf.doAttack('sword')">Attack with <strong>Sword</strong></a></div>
		<div><a href="javascript:void(0)" onclick="YAHOO.alw.smkf.doAttack('magic')">Attack with <strong>Magic</strong></a></div>
		<div><a href="javascript:void(0)" onclick="YAHOO.alw.smkf.doAttack('kungfu')">Attack with <strong>KungFu</strong></a></div>
	</div>
	<div id='continue'>
	   <div><a href="javascript:void(0)" onclick='YAHOO.alw.smkf.doContinue()'>Continue</div>
	</div>
	<hr>
	<a href="javascript:window.location.reload()">reload</a>
	<div id='imgdump' style="display:none;"></div>
</body>
</html>
